<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    #zhaiyaobody div{
        float: left;
        width: 100%;
        font-size: 4vw;
        font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
        color: #433F55;
    }

    </style>
</head>
<body id="zhaiyaobody" style="height: calc(100vh);width: 100%;">
    <div>
        <div style="height: calc(35vh);text-align: center;">
            <img id="zhaiyaobody_docimage" src="http://zyy.yesocr.cn/ner/web/images/lunbo_1.jpg" style="width: 90%;height: calc(33vh);border-radius:10px;margin-top: 2vw;">
        </div>
        <div style="min-height: calc(5vh);text-align: left;font-size: 5vw;letter-spacing: 0.2vw;line-height: 10vw;">
            <label style="margin-left: 5%;" id="zhaiyaobody_docname">十万个为什么</label>
        </div>
        <div style="height: calc(3vh);text-align: left;font-size: 3vw;letter-spacing: 0.2vw;line-height: 6vw;">
            <label style="margin-left: 5%;color: #6C6C6C;">分享自【社区】APP</label>
        </div>
        <div style="min-height: calc(40vh);text-align: left;text-indent: 2em;letter-spacing: 0.4vw;line-height: 7vw;">
            <p style="margin-left: 5%;margin-top: 0;" id="zhaiyaobody_doccontent">
                现代悬索结构的主要承重构件是一系列高强度的钢索，按照一定规律悬挂在支撑结构上，因此很容易做到大跨度。这种结构自重很轻，耗钢量又少，本身占用空间也不多，所以是一种比较理想的大跨度结构形式，且跨度越大，经济效益就越显著。悬索结构在桥梁中的运用最为广泛，比如，堪称当今世界第四、中国第一的江阴长江大桥就是一座钢悬索桥，主跨度达1385米。
            </p>
        </div>
       <div style="height: calc(15vh);text-align: left;">
           <div style="border-top:thin solid #DCDCDC;width: 90%;margin-left: 5%;height: calc(2vh);"></div>
           <div style="width: 90%;margin-left: 5%;">
               <img src="../images/1632319465.png" style="height: calc(11vh);">
           </div>
           <div style="border-bottom:thin solid #DCDCDC;width: 90%;margin-left: 5%;height: calc(2vh);"></div>
        </div>
    </div>
    <script src="../js/jquery.min.js"></script>
    <script src="html2canvas.js"></script>
    <script type="text/javascript">
        $(function () {
            setTimeout(function () {
                html2canvas(document.body,{
                    backgroundColor:null,
                    foreignObjectRendering:true
                }).then(canvas => {
                    alert();
                    // canvas为转换后的Canvas对象
                    let oImg = new Image();
                    oImg.src = canvas.toDataURL();  // 导出图片
                    console.log(oImg.src);
                    //document.body.appendChild(oImg);  // 将生成的图片添加到body
                    window.open(oImg.src);
                });

            },1000);

        });




    </script>

</body>
</html>